<template>
  <div class="register-container">
    <el-form
      :model="UserAuth"
      :rules="rules"
      status-icon
      ref="UserAuth"
      label-position="left"
      class="demo-ruleForm register-page"
    >
      <h3 class="title">系统注册</h3>


      <el-form-item label="真实姓名：" prop="realName">
        <el-input
          ref="realName"
          v-model="UserAuth.realName"
          label="真实姓名"
          placeholder="真实姓名"
          name="realName"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-radio v-model="UserAuth.sex" label="1">男</el-radio>
        <el-radio v-model="UserAuth.sex" label="0">女</el-radio>
      </el-form-item>
      <el-form-item label="邮箱：" prop="email">
        <el-input
          ref="email"
          v-model="UserAuth.email"
          type="email"
          label="邮箱"
          placeholder="邮箱"
          name="email"
          tabindex="2"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="省市区：" prop="province">
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions">
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input
          ref="address"
          v-model="UserAuth.address"
          label="详细地址"
          placeholder="详细地址"
          name="address"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="所在医院：" prop="hospital">
        <el-input
          ref="hospital"
          v-model="UserAuth.hospital"
          label="所在医院"
          placeholder="请输入所在医院"
          name="hospital"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="所在科室：" prop="department">
        <el-input
          ref="department"
          v-model="UserAuth.department"
          label="所在科室"
          placeholder="请选择科室"
          name="department"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="所在副科室：" prop="deputyDepartment">
        <el-input
          ref="deputyDepartment"
          v-model="UserAuth.deputyDepartment"
          label="所在副科室"
          placeholder="请选择副科室"
          name="deputyDepartment"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="职位：" prop="professor">
        <el-input
          ref="professor"
          v-model="UserAuth.professor"
          label="职位"
          placeholder="请输入所在医院职位"
          name="professor"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="擅长：" prop="skills">
        <el-input
          ref="skills"
          v-model="UserAuth.skills"
          label="擅长"
          placeholder="请输入擅长治疗方向"
          name="skills"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="图文问诊期望价格：" prop="moderPrice">
        <el-input
          ref="moderPrice"
          v-model="UserAuth.moderPrice"
          label="图文问诊期望价格"
          placeholder="请输入图文问诊期望价格"
          name="moderPrice"
          type="number"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="电话问诊期望价格：" prop="porderPrice">
        <el-input
          ref="porderPrice"
          v-model="UserAuth.porderPrice"
          label="电话问诊期望价格"
          placeholder="请输入电话问诊期望价格"
          name="porderPrice"
          type="number"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="寄语：" prop="message">
        <el-input
          ref="message"
          v-model="UserAuth.message"
          label="寄语"
          placeholder="请输入寄语"
          name="Message"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item label="验证码：" prop="Code">
        <el-input
          ref="Code"
          v-model="UserAuth.Code"
          label="验证码"
          placeholder="请输入验证码"
          name="Code"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
        <div @click="imgRefersh">
          <img v-bind:src="imgSrc"/>
        </div>
      </el-form-item>
      <el-form-item label="头像：" prop="head">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="UserAuth.head" :src="UserAuth.head" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="证明文件：" prop="files">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="UserAuth.files">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="handleRegister"
      >注册
      </el-button>

      <div style="width:100%;margin-left:16%;">
        <span style="font-size:14px;">已有账号，立即登录</span>
        <el-button
          :loading="loading"
          type="success"
          size="small"
          style="width:18%;margin-bottom:30px;margin-left:15px"
          @click.native.prevent="handleDoctorLogin"
        >登录
        </el-button>
      </div>

    </el-form>
  </div>
</template>

<script>
import {CodeToText, regionData} from 'element-china-area-data'

export default {
  data() {
    return {
      options: regionData,
      loading: false,
      selectedOptions: [],
      UserAuth: {
        // 真实姓名
        realName: '',
        // 医生性别0女1男
        sex: 0,
        // 邮箱
        email: '',
        // 省份
        province: '',
        // 地区
        area: '',
        // 详细地址
        address: '',
        // 副科室
        deputyDepartment: '',
        //图文问诊期望价格
        moderPrice: '',
        // 文件
        files: [],
        // 寄语
        message: '',
        //医学背景
        background: '',
        //所在医院
        hospital: '',
        //科室
        department: '',
        //职位
        professor: '',
        //擅长
        skills: '',
        //电话问诊期望价格
        porderPrice: '',
        //验证码
        Code: '',
        //医生头像图片
        head: '',
      },
      rules: {
        realName: [{required: true, message: "请输入真实姓名", trigger: "blur",},
        ],
        email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
        sex: [{required: true, message: "请选择性别", trigger: "blur"}],
        province: [{required: true, message: "请选择省市区", trigger: "blur"}],
        hospital: [{required: true, message: "请输入所在医院", trigger: "blur"}],
        department: [{required: true, message: "请选择科室", trigger: "blur"}],
        deputyDepartment: [{required: true, message: "请选择副科室", trigger: "blur"}],
        professor: [{required: true, message: "请输入所在医院职位", trigger: "blur"}],
        skills: [{required: true, message: "请输入擅长治疗方向", trigger: "blur"}],
        moderPrice: [{required: true, message: "请输入图文问诊期望价格", trigger: "blur"}],
        porderPrice: [{required: true, message: "请输入电话问诊期望价格", trigger: "blur"}],
        Code: [{required: true, message: "请输入验证码", trigger: "blur"}],
        head: [{required: true, message: "请上传真实头像", trigger: "blur"}],
      },
      checked: false,
      imgSrc: 'http://123.207.95.77:8080/verify/image'
    }
  },
  computed: {
    province: function () {
      return CodeToText[this.selectedOptions[0]]
    },
    area: function () {
      return CodeToText[this.selectedOptions[1]] + CodeToText[this.selectedOptions[2]];
    },
  },
  methods: {
    handleDoctorLogin() {
      this.$router.replace("/");
    },
    handleRegister() {
    },
    imgRefersh() {
      this.imgSrc = 'http://123.207.95.77:8080/verify/image' + '?time=' + new Date().getTime()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  },
};
</script>

<style scoped>
.register-container {
  width: 100%;
  height: 100%;
}

.register-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 20px auto;
  width: 30%;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-input {
  width: auto;
}

</style>
